<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>

    <style type="text/css">
        body {
            font-size: 14px;
            background: #f3f3f3;
        }

        .contain {
            margin-top: 15px;
        }

        .menuRgiht {
            float: right;
            margin-right: 20px;
        }

        /*下面弹出的样式*/
        .pickerToTop {
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(143px);
            height: 143px;
            overflow-y: auto;
            -webkit-transition: .5s;
            transition: .5s;
            z-index: 999;
            width: 100%;
            text-align: center;
        }

        .toTopAnimate {
            -webkit-transform: translateY(00px);
        }

        .aui-radio-name {
            margin: 0;
            height: 20px;
            line-height: 20px;
        }

        .aui-radio {
            width: 20px;
            height: 20px;
        }

        .aui-radio {
            margin: 0;
            margin-right: 5px;
        }

        .aui-list-view:after {
            border: none;
        }

        .aui-radio:checked:before, .aui-radio.aui-checked:before {
            left: 1px;
            top: -1px;
        }

        .aui-radio:checked:after, .aui-radio.aui-checked:after {
            content: "";
        }

        .aui-radio:checked, .aui-radio.aui-checked {
            background-color: #327afa;
            border: solid 1px #327afa;
        }

        .tips {
            height: 20px;
            line-height: 20px;
            padding: 0 15px;
            margin-bottom: 15px;
        }

        .singleInput {
            height: 21px;
            border: none !important;
            width: 60px !important;
            margin-bottom: 0 !important;
            padding: 0 !important;
            text-align: right;
            margin-right: 8px;
        }

        .pickerToTop .aui-list-view {
            margin-bottom: 0;
        }

        .singlePrice {
            display: inline-block;
        }

        .myBorder {
            height: 8px;
            background: #193d7d;
        }

        .minCount {
            padding-right: 10px;
            margin-right: 10px;
            /*border-right:1px solid #9c9c9c;*/
            position: relative;
        }

        .minCount:before {
            content: "";
            position: absolute;
            width: 1px;
            background: #c8c7cc;
            bottom: -15px;
            top: -15px;
            right: 0;
        }

        .singlePrices {
            display: none;
        }

        .numText em {
            color: #000;
            padding-right: 5px;
        }

        .numText:after {
            font-family: "auiicon" !important;
            right: 15px;
            content: '\e6a3';
            color: #bbbbbb;
        }
    </style>
</head>
<body>
<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell" tapmode data-type="offer" onclick="checkPriceType()">
            <a class="aui-arrow-right">
                报价方式
                <span class="menuRgiht formatText">按规格报价</span>
            </a>
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="">
                起订量
                <span class=" numText aui-pull-right" tapmode data-type="type" onclick="setType()"><em
                        class="numTextSpan">条</em></span>
                <span class="minCount aui-pull-right"><input type="number" oninput="checkNumber(this)"
                                                             onpropertychange="checkNumber(this)" placeholder="请输入"
                                                             class="howMany singleInput isNumber" name=""></span>
            </a>
        </li>
        <li class="aui-list-view-cell">
            <span>显示价格</span>
            <span class="aui-pull-right"><div class="singlePrice"><input type="number" placeholder="请输入"
                                                                         class="singlePriceInput singleInput showPrice"
                                                                         oninput="checkFloat(this)"
                                                                         onpropertychange="checkFloat(this)"
                                                                         name=""></div>元</span>
        </li>
    </ul>
    <!-- 规格报价模块 -->
    <div class="formatPrice">
        <!-- 价格模块 -->
        <ul class="tips priceTips">
            <li class="">
                价格
                <span class="aui-pull-right allSameSpan" tapmode onclick="setSamePrice()"><input class="aui-radio"
                                                                                                 type="checkbox"
                                                                                                 name="priceRadio"><div
                        class="aui-radio-name">全部相同</div></span>
            </li>
        </ul>
        <ul class="aui-list-view setPriceUl">
            <!--<li class="aui-list-view-cell">-->
            <!--<span>蘑菇白色、10*15cm</span>-->
            <!--<span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>-->
            <!--</li>-->

        </ul>
        <!-- 数量模块 -->
        <ul class="tips numTips">
            <li class="">
                可售数量
                <span class="aui-pull-right allSameSpan" tapmode onclick="setSameStock()"><input class="aui-radio"
                                                                                                 type="checkbox"
                                                                                                 name="numRadio"><div
                        class="aui-radio-name">全部相同</div></span>
            </li>
        </ul>
        <ul class="aui-list-view setCountUl">
            <!--<li class="aui-list-view-cell">-->
            <!--<span>蘑菇白色、10*15cm</span>-->
            <!--<span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>-->
            <!--</li>-->
        </ul>
    </div>
    <!-- 单品报价模块 -->
    <div class="singlePrices">
        <ul class="aui-list-view ">
            <li class="aui-list-view-cell">
                <span>产品单价</span>
                <span class="aui-pull-right"><div class="singlePrice"><input type="number" placeholder="请输入"
                                                                             class="singlePriceInput singleInput"
                                                                             oninput="checkFloat(this)"
                                                                             onpropertychange="checkFloat(this)"
                                                                             name=""></div>元</span>
            </li>
            <li class="aui-list-view-cell">
                <span>产品库存</span>
                <span class="aui-pull-right"><em class="singleNum"><input type="number" oninput="checkNumber(this)"
                                                                          onpropertychange="checkNumber(this)"
                                                                          placeholder="请输入"
                                                                          class="singleNumInpupt singleInput singleCountInput"
                                                                          name=""></em></span>
            </li>
        </ul>
    </div>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript">
    var firstH;//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
    var colors, sizes;
    var priceType = "more", danwei = "条",//报价方式和单位
        colorsArray = new Array(), sizesArray = new Array(),//颜色和大小数组
        leastCount = 0,//最少起订量
        showPrice = 0;//显示的价格
    var proCount = 0;//库存
    var beforeColors = [], beforeSizes = [];//以前数据的数组
    var goodsId;
    var getData;//获取的大小数据，包括价格和数量
    var colorData = {};
    apiready = function () {
        api.parseTapmode();
        leastCount = api.pageParam.leastCount;
        showPrice = api.pageParam.showPrice;

        goodsId = api.pageParam.goodsId;
        beforeColors = api.pageParam.beforeColors;
        beforeSizes = api.pageParam.beforeSizes;

        if (api.pageParam.colors != "") {
            colorsArray = toArray(api.pageParam.colors, ',');
            sizesArray = toArray(api.pageParam.sizes, ',');
            loadNewData(colorsArray,sizesArray);
        } else {
            //getGoodSpecData()
            loadData();
        }



    }

    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        if ($(obj).hasClass("active")) {
            $(obj).removeClass("active");
        } else {
            $(obj).addClass("active");
        }
    }
    // 弹出时候设置各种方式
    function setType() {
        api.actionSheet({
            title: "设置单位",
            buttons: ["条", "件"]
        }, function (ret, err) {

            if (ret.buttonIndex == 1) {
                $(".numTextSpan").text("条");
                danwei = "条";
            } else if (ret.buttonIndex == 2) {
                $(".numTextSpan").text("件");
                danwei = "件";

            }
        })
    }

    //设置当前页面的高度，得以去掉win的确定按钮
    function setFrameHeight(h) {
        //设置release_win的页面高度,把页面的确定挤出外面
        // h参数：1为去掉确定按钮，0为显示
        var bodyH;
        if (h) {
            // 添加自定义状态，隐藏win的确定
            firstH = $('body').height();
            bodyH = $('body').height() + 55;
        } else {
            bodyH = firstH;
        }
        api.setFrameAttr({
            name: 'releasePrice_frm',
            rect: {
                x: 0,
                y: 45,
                w: 'auto',
                h: bodyH
            },
            bounces: true,
            bgColor: '#fff',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    // 设置价格相同
    function setSamePrice() {
        var price = $(".formatPrice").find(".priceInput").eq(0).val();
        if (price) {
            $(".formatPrice").find(".priceInput").val(price)
        } else {
            alert("请设置第一个价格！");
            event.preventDefault();
            $("input[name='priceRadio']").prop("checked", false);

        }
    }
    // 设置库存相同
    function setSameStock() {
        var stock = $(".formatPrice").find(".stockInput").eq(0).val();
        if (stock) {
            $(".formatPrice").find(".stockInput").val(stock)
        } else {
            alert("请设置第一个库存！");
            $("input[name='numRadio']").prop("checked", false);

        }
    }
    //加载设置
    function loadData() {
        showLoading();
        $(".howMany").val(leastCount);//显示最少起批量
        $(".showPrice").val(showPrice);//显示  显示的价格
        var priceHtml = "", countHtml = "";


        var data = {};
        var url = 'mall/spec/goodsId/' + goodsId;
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                getData = ret.msg.cat;
                for (var i = 0; i < getData.length; i++) {
                    for (var j = 0; j < getData[i]["content"].length; j++) {

                        priceHtml += '<li class="aui-list-view-cell" data-id="' + getData[i]["content"][j]["id"] + '"><span><em class="colorEm">' + getData[i]["spec1"] + '</em>、<em class="sizeEm">' + getData[i]["content"][j]["spec2"] + '</em></span><span class="aui-pull-right"><em class="price"><input type="number" value="' + getData[i]["content"][j]["money"] + '" oninput="checkFloat(this)" onpropertychange="checkFloat(this)" placeholder="请输入" class="priceInput singleInput isNumberFloat" ></em>元</span></li> ';
                    }
                }


                for (var i = 0; i < getData.length; i++) {
                    for (var j = 0; j < getData[i]["content"].length; j++) {

                        countHtml += '<li class="aui-list-view-cell"  data-id="' + getData[i]["content"][j]["id"] + '"><span><em class="colorEm">' + getData[i]["spec1"] + '</em>、<em class="sizeEm">' + getData[i]["content"][j]["spec2"] + '</em></span><span class="aui-pull-right"><em class="price"><input type="number" value="' + getData[i]["content"][j]["amount"] + '" oninput="checkNumber(this)" onpropertychange="checkNumber(this)" placeholder="请输入" class="priceInput singleInput isNumber" ></em></span></li> ';
                    }
                }
                hideLoading();
                $(".setPriceUl").html(priceHtml);
                $(".setCountUl").html(countHtml);
            } else {
                api.toast({
                    msg: "获取数据出错"
                })
            }
        });


    }

    function loadNewData(color,size) {

    }
    function checkNumber(obj) {
        var value = $(obj).val();
        if (!isNumber(value)) {
            $(obj).val("");
            api.toast({
                msg: "请输入正确格式！"
            })
        }
    }
    function checkFloat(obj) {
        var value = $(obj).val();
        if (!isNumberFloat(value)) {
            $(obj).val("");
            api.toast({
                msg: "请输入正确格式！"
            })
        }
    }
    //选择价格设置方式
    function checkPriceType() {
        api.toast({
            msg:"不能单品报价！"
        })
        return ;
        api.actionSheet({
            title: "选择报价方式",
            buttons: ["按规格报价", "单品报价"]
        }, function (ret, err) {
            if (ret.buttonIndex == 1) {
                attrJson = "";
                proCount = 0;
                $(".formatPrice").find("input").val("");
                priceType = "more";
                $(".formatPrice").css({"display": "block"});
                $(".singlePrices").css({"display": "none"});
                $(".formatText").text("按规格报价");
            } else if (ret.buttonIndex == 2) {
                attrJson = "";
                proCount = 0;
                $(".formatPrice").find("input").val("");
                priceType = "same";
                $(".formatPrice").css({"display": "none"});
                $(".singlePrices").css({"display": "block"});
                $(".formatText").text("单品报价");
            }
        })
    }
    //接收来自win的方法
    function sure() {
        if ($(".howMany").val().trim() == "") {
            api.toast({
                msg: "请输入起订量",
                location: "middle"
            })
            $(".howMany").focus();
            return;
        } else {
            leastCount = $(".howMany").val();
        }
        if ($(".showPrice").val().trim() == "") {
            api.toast({
                msg: "请输入显示价格",
                location: "middle"
            })
            $(".showPrice").focus();
            return;
        } else {
            showPrice = $(".showPrice").val();
        }

        var attrJson = "";
        if (priceType == "more") {
            //不同价格时候的而判断

            if (checkHasNull("setPriceUl") && checkHasNull("setCountUl")) {
//                处理数据
                var $counts = $(".setCountUl").find("li");
                var $prices = $(".setPriceUl").find("li");
                attrJson += "[";
                $prices.each(function (index) {
                    if (index > 0) {
                        attrJson += ",";
                    }
                    attrJson += "{";
                    attrJson += '"specId":"' + $(this).attr("data-id") + '",';
                    attrJson += '"name1":"颜色",';
                    attrJson += '"spec1":' + '"' + $(this).find(".colorEm").eq(0).text() + '",';
                    attrJson += '"name2":"大小",';
                    attrJson += '"spec2":' + '"' + $(this).find(".sizeEm").eq(0).text() + '",';
                    attrJson += '"amount":' + '"' + $counts.eq(index).find("input").eq(0).val() + '",';
                    attrJson += '"money":' + '"' + $(this).find("input").eq(0).val() + '",';
                    attrJson += '"pic":"http:"';
                    attrJson += "}";
                    proCount += parseInt($counts.eq(index).find("input").eq(0).val());

                })
                attrJson += "]";
//                alert(attrJson)
            } else if (!checkHasNull("setPriceUl")) {
                api.toast({
                    msg: "请完整填入价格",
                    location: "middle"
                })
                return;
            } else if (!checkHasNull("setCountUl")) {
                api.toast({
                    msg: "请完整填入数量",
                    location: "middle"
                })
                return;
            }
        } else {
            //相同价格时候的判断
            if (checkHasNull("singlePrices")) {
                //处理数据
                var singlePrice = $(".singlePriceInput").val();
                var singleCount = $(".singleCountInput").val();
                attrJson += "["
                for (var i = 0; i < colorsArray.length; i++) {
                    for (var j = 0; j < sizesArray.length; j++) {

                        if (i + j > 0) {
                            attrJson += ",";
                        }

                        attrJson += "{";
                        attrJson += '"name1":"颜色",';
                        attrJson += '"spec1":' + '"' + colorsArray[i] + '",';
                        attrJson += '"name2":"大小",';
                        attrJson += '"spec2":' + '"' + sizesArray[j] + '",';
                        attrJson += '"amount":' + '"' + singleCount + '",';
                        attrJson += '"money":' + '"' + singlePrice + '",';
                        attrJson += '"pic":"http:"';
                        attrJson += "}";
                        proCount += singleCount;

                    }
                }

                attrJson += "]"
            } else {
                api.toast({
                    msg: "请填入数量或者价格",
                    location: "middle"
                })
                return;
            }
        }
        //把数据发送到发布页面
        api.sendEvent({
            name: "releasePrice",
            extra: {
                attrJson: attrJson,
                leastCount: leastCount,
                showPrice: showPrice,
                proCount: proCount
            }
        })
        closeWin();
    }
    //检查是否又不填写的
    function checkHasNull(name) {
        var sum = 0;
        var len = $("." + name).find("input").length;
        $("." + name).find("input").each(function () {
            if ($(this).val().trim() != "") {
                sum++;
            }
        })
        if (sum == len) {
            return true;
        } else {
            return false;
        }
    }
    function getGoodSpecData() {

    }
</script>
</html>